<template>
  <div class="main_content">
    <father-title></father-title>
    <div class="contentBox">
      <header-tabs>
        <template slot="tabs">
          <div>
            <div class="select_tab">参数管理</div>
          </div>
        </template>
      </header-tabs>

      <div class="middleBox">
        <search-box @clickSearch="search">
          <template slot="left">
            <Input v-model="searchParams.paramKey" placeholder="请输入参数名"></Input>
          </template>

          <template slot="right">
            <Button v-if="$store.state.perms.includes('sys:config:save')" type="primary" @click="addData">新增</Button>
          </template>
        </search-box>

        <v-table :loading="pageConfig.loading" border :columns="columns" :data="list">
          <template slot-scope="{ row }" slot="operation">
            <Button v-if="$store.state.perms.includes('sys:config:update')" type="primary" size="small" @click="editData(row)">修改</Button>
            <Button v-if="$store.state.perms.includes('sys:config:delete')" class="button_spacing" type="error" size="small" @click="deleteData(row)">删除</Button>
          </template>
        </v-table>

        <v-page :pageConfig="pageConfig" @refresh="getList"></v-page>
      </div>
    </div>

    <AddOrEditModal
        v-model="modalCTL.show"
        :title="modalCTL.title"
        :loading="modalCTL.loading"
        @on-ok="addOrEditData">
      <Form
          ref="form"
          :model="formValidate"
          :rules="ruleValidate"
          label-position="top"
          slot="content">
        <FormItem label="参数名" prop="paramKey">
          <Input v-model="formValidate.paramKey" placeholder="" />
        </FormItem>
        <FormItem label="参数值" prop="paramValue">
          <Input v-model="formValidate.paramValue" placeholder="" />
        </FormItem>
        <FormItem label="备注" prop="remark">
          <Input v-model="formValidate.remark" placeholder="" />
        </FormItem>
      </Form>
    </AddOrEditModal>
  </div>
</template>

<script>
  import {columns, pageConfig, formValidate, ruleValidate} from "./pageConfig";

  export default {
    name: 'ParamsManage',

    data() {
      return {
        columns,
        pageConfig,
        formValidate: {...formValidate},
        ruleValidate,
        list: [],
        searchParams: {
          paramKey: null
        },
        modalCTL: {
          show: false,
          loading: true,
          title: ""
        },
      };
    },

    mounted() {
      this.getList(this.pageConfig);
    },

    methods: {
      // 删除数据
      deleteData(data){
        this.$Modal.confirm({
          title: '删除',
          content: `是否删除${data.paramKey}？`,
          loading: true,
          onOk: () => {
            this.$api.post('sp/sys/config/delete', [data.id]).then((res)=>{
              if(res.data.code === 0){
                this.getList(this.pageConfig);
                this.$Message.success('删除成功');
              }
            }).finally(()=>this.$Modal.remove());
          }
        });
      },

      // 新增数据
      addData(){
        this.formValidate = {...formValidate};
        this.modalCTL.title = "新增系统参数";
        this.modalCTL.show = true;
      },

      // 修改数据
      editData(data){
        let form = {...formValidate};
        Object.keys(form).forEach((key) => form[key] = data[key]);
        this.formValidate = form;
        this.modalCTL.title = "修改系统参数";
        this.modalCTL.show = true;
      },

      // 新增或修改
      addOrEditData(){
        // 校验数据
        this.$refs.form.validate(state => {
          if (!state){
            this.modalCTL.loading = false;
            this.$nextTick(() => {
              this.modalCTL.loading = true;
            });
            return this.$Message.warning("请填写对应的值");
          }
          // 判断新增或修改
          if(this.formValidate.id){
            this.$api.post('sp/sys/config/update', this.formValidate).then((res)=>{
              if(res.data.code === 0){
                this.getList(this.pageConfig);
                this.$Message.success("修改成功");
              }
            }).finally(()=> this.modalCTL.show = false);
          }else{
            this.$api.post('sp/sys/config/save', this.formValidate).then((res)=>{
              if(res.data.code === 0){
                this.getList(this.pageConfig);
                this.$Message.success("新增成功");
              }
            }).finally(()=> this.modalCTL.show = false);
          }

        });
      },

      // 获取列表
      getList(page){
        this.pageConfig.loading = true;
        this.$api.get("sp/sys/config/list", {
         params: {
           page: page.pageNow,
           limit: page.pageSize,
           ...this.searchParams,
         }
        }).then((res)=>{
          if(res.data.code === 0){
            this.list = res.data.page.list;
            this.pageConfig.total = res.data.page.totalCount;
          }
        }).finally(()=>{
          this.pageConfig.loading = false;
        });
      },

      // 搜索
      search(){
        this.pageConfig.pageNow = 1;
        this.getList(this.pageConfig);
      },
    }
  };
</script>

<style scoped lang="less">
</style>